import { TextInput, View, Image, Button, StyleSheet, ImageBackground, Text } from "react-native"
import * as ImagePicker from 'expo-image-picker';
import { useEffect, useState } from "react"
import { useAuth } from "../context/AuthProvider";

const PullSale = ({ navigation }) => {
    const [image, setImage] = useState('https://ts1.cn.mm.bing.net/th/id/R-C.abb349a4310cb474a609db456e6a4655?rik=%2fbb8KDX4kJ1Bkg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f40%2f44%2f80573cfeafb858a.jpg&ehk=tw8blQ9jfJcIQYEWyA4prAIl4QQzVfa4UCMnU01G9SM%3d&risl=&pid=ImgRaw&r=0');
    const [text, setText] = useState('')
    const [text1, setText1] = useState()
    const [text2, setText2] = useState('物品名称')
    const { user } = useAuth()
    const pullSale = () => {
        // console.log(text);
        // 把text传进后台存储起来，然后再显示再sale页面
        fetch('http://10.7.89.174:3000/sale', {
            method: 'POST',
            body: JSON.stringify({
                text: text,
                name: text2,
                price: text1,
                userName: user.userName,
                avatar: user.avatarUrl
            })
        })
            .then(data => {
                console.log(data);
                navigation.navigate('tab')
            })
    }
    // 上传照片信息到后台然后存储进数据库
    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
            base64: true
        });
        console.log(result.assets[0].base64.length);
        // console.log(result.assets);
        // assets中存储了图片的信息
        if (!result.canceled) {
            setImage(result.assets[0].uri);
            console.log(text);
            fetch("http://10.7.89.174:3000/saleuploadimg", {
                method: 'POST',
                body: JSON.stringify({
                    url: result.assets[0].uri,
                    height: result.assets[0].height,
                    width: result.assets[0].width,
                    userName: user.userName,
                    text: text,
                    base64: result.assets[0].base64
                })
            }).then(res => res.json())
                .then(data => {
                    console.log(data);
                })
        }
    };
    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../icon/orange.jpg')} style={styles.bgimg}>
                <View>
                    <View style={{ width: 50, height: 50, marginTop: "2%", marginLeft: "3%" }}>
                        {/* 用户头像可以在users中查询，然后把数据放入message中，但是需要一个变量来确定这个用户 */}
                        <Image source={{ uri: 'data:image/jpeg/jpg;base64,' + user.avatarUrl }}
                            style={{ width: 50, height: 50, borderRadius: 50, }} />
                    </View>
                    <View style={{ width: 100, height: 80, marginTop: "-10%", marginLeft: "18%" }}>
                        {/* 用户头像可以在users中查询，然后把数据放入message中，但是需要一个变量来确定这个用户 */}
                        <Text style={{ fontSize: 30 }}>{user.userName}</Text>
                    </View>
                    <View style={{marginLeft:"5%"}}>
                        <Text>物品描述:</Text>
                        <TextInput
                            onChangeText={value => setText(value)}
                            value={text}
                            placeholderTextColor={'black'}
                            placeholder={"需要出租的物品"}
                            style={{
                                marginTop: 10,
                                height: 50, color: 'black', borderBottomColor: "orange",
                                borderBottomWidth: 1, width: '80%', marginLeft: "5%"
                            }}
                        ></TextInput>
                    </View>
                    {/* 获取物品价格 */}
                    <View style={{ marginTop: "5%",marginLeft:'5%' }}>
                        <Text>物品价格:</Text>
                        <TextInput
                            onChange={(e) => { setText1(e.nativeEvent.text) }}
                            value={text1}
                            style={{
                                marginTop: 10,
                                height: 50, color: 'black', borderBottomColor: "orange",
                                borderBottomWidth: 1, width: '80%', marginLeft: "5%"
                            }}
                        ></TextInput>
                    </View>
                    {/* 获取物品名称 */}
                    <View style={{ marginTop: "5%" ,marginLeft:"5%"}}>
                        <Text>物品名称:</Text>
                        <TextInput
                            onChange={(e) => { setText2(e.nativeEvent.text) }}
                            value={text2}
                            style={{
                                marginTop: 10,
                                height: 50, color: 'black', borderBottomColor: "orange",
                                borderBottomWidth: 1, width: '80%', marginLeft: "5%"
                            }}
                        ></TextInput>
                    </View>
                </View>
                {/* 上传图片 */}
                <View style={{marginLeft:"5%"}}>
                    <View>
                        <Image
                            source={{ uri: image }}
                            style={{ width: 120, height: 120, marginLeft: 10, marginTop: 10 }}
                        />
                    </View>
                    <View style={{
                        width: 50,
                        height: 50,
                        marginLeft: 20,
                        marginTop: 10
                    }}>
                        <Button
                            key='img'
                            title="图片"
                            onPress={pickImage}
                            color='#f9748f'//注意，使用表达式需要添加大括号
                        >
                        </Button>
                        <View style={{ marginTop: 10 }}>
                            <Button title='发布' onPress={() => pullSale()}></Button>
                        </View>
                    </View>
                </View>
            </ImageBackground>
        </View>
    )
}
const styles = StyleSheet.create({

    img: {
        width: 100,
        height: 100,
        marginLeft: 20,
        marginTop: 10,
        borderColor: 'gray',
        borderWidth: 1,
        textAlign: 'center'
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
        // justifyContent: "center"
    },
});
export default PullSale